<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<style type='text/css'>
			.selected {
				background-color: #f80 !important;
			}			
			.tab, .note, #boo {
				cursor: pointer;
				background-color: lightblue;
				border: solid grey 1px;
				margin: 2px;
			}
			dl.controlDef, a.directTie {
				/*display: none !important;*/
				font-family: monospace;
				color: grey;
			}
			#panes .pane {
				display: none;
			}
		</style>		
		<script type='text/javascript' src='http://jquery.com/src/jquery-latest.js'></script>		
		<script type='text/javascript' src='protoControl.js'></script>
		<script type='text/javascript'>				
			protoControl.extend({
				'chooseTab': function (expr) {
					if (!jQ(this.targetControl).is(".selected")) {
						jQ(this.delegator).trigger('tabSelect');
					} else {
						jQ(this.delegator).trigger('tabDeselect');						
					}
				},
				'#tabs deselect': function (expr) {
					jQ(this.delegator).trigger('tabDeselect');
				},
			});

			jQ(function () {
				protoControl.init();
			});
		</script>
		<title>control example</title>
	</head>
	
	<body>
		<!-- Use markup like this to define the behavior for a control or a class of controls. -->
		<!-- NOTE: -->
			<!-- Both control and delegator elements default to the next sibling element after the control definition list  -->
			<!-- The control element of a control definition must have an id -->
			<!-- The delgator element of a control definition doesn't need an id -->
			<!-- If the definition markup is for a class of controls, they must be contained within delegator element -->
			<!-- If if a delegator element is destroyed, you're screwed... -->
			<!-- ...You can, however, create and destroy any control elements you like (as long as they are not also delegator elements). -->			
			
		<!-- EXAMPLE 1: Setting up behavior for a class of controls -->		
		<!-- control definition -->
		<!-- delegator element defaults to #classDingControls -->
		<hr />
		<h2>EXAMPLE 1: Setting up behavior for a class of controls</h2>
		<p>When any control with class "note" is clicked, select the element with id "la".</p>
		<dl class='controlDef'>
			<dt>{control:'.note'}</dt>			
			<dd>{tie:'#la', event:'click', action:'select', toggle:true}</dd>				
		</dl>
		<ul id='notes'> 				
			<li class='note'>do</li>
			<li class='note'>re</li>
			<li class='note'>mi</li>
			<li class='note'>fa</li>
			<li class='note'>so</li>
			<!-- if you dynamically add more class ding controls here (say, "la" and "ti") they will just work -->
		</ul>
	
		<h1 id='la'>LA!</h1>
			
		<!-- EXAMPLE 2: Setting up behavior for a stand-alone control -->
		<!-- when the "boo" control is clicked, select it and show or hide the element with id="dong" -->
		<!-- both control and delegator elements default to #boo -->
		<hr />
		<h2>EXAMPLE 2: Setting up behavior for a stand-alone control</h2>
		<p>When the "BOO!" control is clicked, select or deselect it and show or hide "EEK!" element</p>			
		<dl class='controlDef'>		
			<dt>{control:'#boo'}</dt>		
			<dd>{tie:'#boo', event:'click', action:'select', toggle:true}</dd>
			<dd>{tie:'#eek', event:'click', action:'show', toggle:true}</dd>				
		</dl>		
		<p id='boo'>BOO!</p>
		<h1 class='scare' id='eek'>EEK!</h1>

		<!-- EXAMPLE 3: Tab control expample -->
		<hr />
		<h2> EXAMPLE 3: Tab control expample using custom event and action</h2>
		<ol>
			<li>When the tabs delegator is clicked, the 'chooseTab' action triggers a 'tabSelect' event.</li>
			<li>When the tab clicked on gets the 'tabSelect' message, it selects itself.</li>
			<li>When the cooresponding pane gets the 'tabSelect' message it shows itself.</li>			
		</ol>
		<p>In reality, the delegator is the element that gets all the messages and tells the proper elements what to do...</p>
		<!-- tab control definition -->
		<dl class='controlDef'>
			<dt>{control:'.tab', delegator:'#tabs'}</dt>
			<dd>{tie:'#tabs', event:'click', action:'chooseTab'}</dd>			
			<dd>{tie:'.tab', event:'tabSelect', action:'select', exclusive:true}</dd>											
			<dd>{tie:'#panes .pane', event:'tabSelect', action:'show', exclusive:true}</dd>						
		</dl>
		<!-- the tabs -->
		<ol id='tabs'>
			<li class='tab selected'>tab1</li>
			<li class='tab'>tab2</li>
			<li class='tab'>tab3</li>
			<li class='tab'>tab4</li>
			<li class='tab'>tab5<a class='directTie'>#pane5</a></li>
		</ol>		
		<!-- the panes -->
		<div id='panes'>
			<div class='pane' style='display: block;'>PANE1!</div>
			<div class='pane'>PANE2!</div>
			<div class='pane'>PANE3!</div>
			<div class='pane'>PANE4!</div>
			<div class='pane' id='pane5'>PANE5!</div>
		</div>		
	</body>
</html>